<template>
  <div class="dialog_div_new">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm"
      hide-required-asterisk>
      <el-row :gutter="24" style>
        <el-col :span="10">
          <el-form-item label prop="companyName">
            <div slot="label" class="custom_star">
              <p class="custom_label">公司名称</p>
              <div class="star">*</div>
            </div>
            <el-input v-model="ruleForm.companyName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label prop="bankOfDeposit">
            <p slot="label" class="custom_label">开户银行</p>
            <el-input v-model="ruleForm.bankOfDeposit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="10">
          <el-form-item label prop="taxpayerIdentificationNumber">
            <p slot="label">纳税人识别号</p>
            <el-input v-model="ruleForm.taxpayerIdentificationNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label prop="accountNumber">
            <p slot="label" class="custom_label">开户账号</p>
            <el-input v-model="ruleForm.accountNumber"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="10">
          <el-form-item label prop="phoneNumber">
            <p slot="label" class="custom_label">联系电话</p>
            <el-input v-model="ruleForm.phoneNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label prop="accountName">
            <p slot="label" class="custom_label">开户名</p>
            <el-input v-model="ruleForm.accountName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="10">
          <el-form-item label prop="address">
            <p slot="label" class="custom_label">公司地址</p>
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label prop="fax">
            <p slot="label" class="custom_label">传真</p>
            <el-input v-model="ruleForm.fax"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="10">
          <el-form-item label prop="name">
            <p slot="label" class="custom_label">支付申请</p>
            <el-button size="small ">生成收款码</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label prop="name">
            <p slot="label" class="custom_label">账号头像</p>
            <el-upload class="upload-demo" :action="uploadAction" :on-success="handleSuccess" :file-list="fileList"
              :headers="headers" :show-file-list="false">
              <el-button size="small ">上传头像</el-button>
            </el-upload>

            <div class="headPortrait">
              <el-image v-if="ruleForm.avatar" style="width: 100%; height: 100%; border-radius: 50%;"
                :src="ruleForm.avatar" :preview-src-list="[ruleForm.avatar]"></el-image>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="18">
          <el-form-item class="bottom_item">
            <el-button type="primary" @click.stop="onAddSubmit" style="margin-right:20px;">保存</el-button>
            <el-button @click.stop="onCancel" style="margin-left:20px;">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- <div class="dialog_bottom">
          <el-button type="primary" @click.stop="onAddSubmit">保存</el-button>
          <el-button @click.stop="dialogVisible = false">取消</el-button>
    </div>-->
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import Vue from 'vue'
import { USER_INFO, ACCOUNT_BOOK, ACCESS_TOKEN } from '@/store/mutation-types'
export default {
  props: {
    bookDetail: Object,
  },
  data() {
    return {
      ruleForm: {
        avatar: ''
      },
      uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
      headers: { "X-Access-Token": Vue.ls.get(ACCESS_TOKEN) },
      fileList: [],
      isLeader: null,
      rules: {
        companyName: [
          { required: true, message: '请输入公司名称！', trigger: 'blur' }
        ],
        phoneNumber: [
          // { pattern: /^1[3|4|5|6|7|8|9]\d{9}$/, message: '请输入正确的手机号!' },
          { validator: this.validateMobile }
        ],
        accountNumber: [
          { pattern: /^[a-z0-9A-Z]{0,30}$/, message: '请输入正确的开户账号!' },
        ]
      }
    }
  },
  watch: {
    bookDetail(val) {
      this.ruleForm = Object.assign({}, val)
      this.getIsLeader()
    }
  },
  methods: {
    // 获取是否是leader
    getIsLeader () {
      let userInfo = Vue.ls.get(USER_INFO)
      getAction('/accountbookusing/xghAccountBookUserUsing/getUserIsLeader', {
        xghAccountBookId: this.ruleForm.id,
        userId: userInfo.id,
      }).then(res => {
        this.isLeader = res.result
      })
    },
    // 校验手机号
    validateMobile(rule, value, callback) {
      if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value) || new RegExp(/^\d{3,5}-\d{6,8}$/).test(value) ) {
        callback();
      } else {
        callback("联系电话格式不正确!");
      }
    },
    trim(str) {
      if (str && typeof str == 'string') {
        return str.replace(/(^\s*)|(\s*$)/g, '')
      } else {
        return str
      }

    },
    handleSuccess(e) {
      this.ruleForm.avatar = e.message
    },
    onAddSubmit() {
      if (!this.isLeader) {
        return this.$elMessage.error('账套持有人才能修改!')
      }
      let keys = Object.keys(this.ruleForm)
      for (let index = 0; index < keys.length; index++) {
        const key = keys[index];
        this.ruleForm[key] = this.trim(this.ruleForm[key])

      }
      console.log(this.ruleForm);
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('onAddSubmit', this.ruleForm)
        } else {

        }
      })
      // if (!this.ruleForm.companyName) {
      //   this.$elMessage.error('请输入公司名称!')
      // } else {
      //   this.$emit('onAddSubmit', this.ruleForm)
      // }
    },
    onCancel() {
      this.$emit('onCancel')
    }
  }
}
</script>

<style lang="scss" scoped>
// ::v-deep .el-input__inner {
//   width: 5.962873rem;
//   height: 0.562535rem;
// }
// ::v-deep .el-form-item__label {
//   color: #666666;
//   font-size: 0.225014rem;
// }
// .el-button {
//   border: 1px solid #1b94fb;
//   border-radius: 0.093756rem;
//   color: #1b94fb;
// }
.headPortrait {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ccc;
  left: 100px;
  top: -5px;
}

// .headPortraitContainer {
//   position: relative;
// }
// ::v-deep .el-form-item__label {
//   text-align: left;
// }
// .containerContent {
//   display: flex;
// }
// .demoRuleForm {
//   margin-left: 1.875117rem;
// }
// .rules {
//   color: rgb(255, 47, 79);
//   position: absolute;
//   left: -0.562535rem;
//   top: 0.037502rem;
// }

::v-deep .el-form-item__error {
  top: 40px;
}

.dialog_div_new {
  margin: 30px 20px;
}

.custom_label {
  padding: 0 12px 0 22px;
  width: 90px;
  text-justify: distribute-all-lines;
  /*ie6-8*/
  text-align-last: justify;
  /* ie9*/
  -moz-text-align-last: justify;
  /*ff*/
  -webkit-text-align-last: justify;
  /*chrome 20+*/
}

.custom_star {
  display: flex;
  align-items: flex-start;
  width: 102px;
}

.star {
  color: red;
  // position: absolute;
  margin-left: -10px;
  height: 100%;
}

.bottom_item {
  margin: 30px 0;
  width: 100%;
  text-align: center;
}

.custom_select_head {
  // right: 10px;
  width: 100%;
  height: 100%;
  position: relative;
}

.custom_more {
  position: absolute;
  right: 10px;
  z-index: 10;
  top: 6px;
  background: #fff;
  height: 28px;
  display: flex;
  align-items: center;
  color: #bfbfbf;
}

.custom_add {
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    margin-left: 5px;
    color: #666666;
  }

  i {
    color: #666666;
  }
}

.cus_div {
  display: flex;
  align-items: center;
  margin-left: 5px;
}
</style>